<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <!-- 表单 -->
            <el-form
              :model="pur"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
              :rules="rules"
              ref="pur"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.process_year')" prop="year">
                    <el-input v-model="pur.year"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_month')" prop="month">
                    <el-input v-model="pur.month"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_monthReal')" prop="monthReal">
                    <el-input v-model="pur.monthReal"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_type')" prop="type">
                    <el-select v-model="pur.type" filterable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in types"
                        :key="index"
                        :label="item.dictText"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_sap_month')" prop="sapMonth">
                    <el-input v-model="pur.sapMonth"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_no')" prop="contractNo">
                    <el-input v-model="pur.contractNo"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_name')" prop="contractName">
                    <el-input v-model="pur.contractName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_supplier')" prop="supplier">
                    <el-input v-model="pur.supplier"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_payment_company')" prop="paymentCompany">
                    <el-select v-model="pur.paymentCompany" filterable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in paymentCompanys"
                        :key="index"
                        :label="item.dictText"
                        :value="item.dictKey"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="$t('pur.currency')" prop="currency">
                    <el-select v-model="pur.currency" filterable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in currencys"
                        :key="index"
                        :label="item.dictText"
                        :value="item.dictKey"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.properAmount')" prop="properAmount">
                    <el-input v-model="pur.properAmount"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_plan_price')" prop="planPrice">
                    <el-input v-model="pur.planPrice"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('pur.contract_practical_price')" prop="practicalPrice">
                    <el-input v-model="pur.practicalPrice"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12"> 
                  <el-form-item :label="$t('pur.contract_declare_user')" prop="declareUser">
                    <PersonSelect id="declareUser" :value="pur.declareUser" @input="(v) => {participant = v}" v-bind:multiple="false" ></PersonSelect>
                  </el-form-item>
                </el-col>
              </el-row>
            
            </el-form>
          </div>
        </PageEditCollapse>
        
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('pur')">{{$t('cm.commit')}}</el-button>
          <el-button type="primary" @click="toList">{{$t('cm.return')}}</el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import FileUploadCommon from '@/components/common/FileUploadCommon'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import { COMMON } from '@/utils/commonUtil'
import CapitalPlan from './js/CapitalPlan'
import sys_manage from '@/api/sys_manage'
import PersonSelect from '@/components/asc/PersonSelect'

const vailSubjectUserName=(rule,value,callback)=>{
  if(document.getElementById("subjectUser").value) {
    callback();
  }else{
    callback(new Error("必填项"));
  }
};

export default {
  components: {
    PageTemplate, PageEditCollapse, PersonSelect, FileUploadCommon
  },
  data () {
    return {
      pur: {
        id: null,
        year: null,
        month: null,
        monthReal: null,
        type: null,
        sapMonth: null,
        contractNo: null,
        contractName: null,
        supplier: null,
        paymentCompany: null,
        currency: null,
        properAmount : null,
        planPrice: null, 
        practicalPrice: null, 
        declareUser: null
      },
      participant:null,
      types: [],
      paymentCompanys: [],
      currencys: [],
      rules: {
        year: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        month: [
          { required: true, message: '必填项,且为整数', trigger: 'blur' }
        ],
        monthReal: [
          { required: true, message: '必填项,且为整数',  trigger: 'blur' }
        ],
        type: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        sapMonth: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        contractNo: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        contractName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        paymentCompany: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        currency: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        properAmount: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        planPrice: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        practicalPrice: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.sysDictLoadByPaging();
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.infoGet(this.$router.history.current.params.id)
    }
  },
  methods: {
    infoGet (id) {
      CapitalPlan.infoGet({ id }, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.pur = result.data;
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    sysDictLoadByPaging () {
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'PurchaseCapital_type'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.types = result.data
        } else {
          ALERT.error(result.msg)
        }
      });
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'PurchaseCapital_payment_company'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.paymentCompanys = result.data
        } else {
          ALERT.error(result.msg)
        }
      });
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'PurchaseCapital_currency'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.currencys = result.data
        } else {
          ALERT.error(result.msg)
        }
      });
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          // this.pur.type = parseInt(this.pur.type); 
          console.log(  document.getElementById('declareUser').value);
          this.pur.declareUser=document.getElementById('declareUser').value;
          var parame =[];   
          parame.push(this.pur);
          CapitalPlan.infoSave(parame, result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_PUR_CAPITAL_PLAN.index, this.$router)
    }
  },
  mounted () {
  },
  computed: {
  }
}
</script>

<style lang="scss">
</style>
